{extend name="default/base/base_home" /}
{block name="mall_main"}

<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/shopnearby.css">
<link rel="stylesheet" href="{$Think.PLUGINS_SITE_ROOT}/swiper/swiper.min.css">
<script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/swiper/swiper.min.js"></script> 
<!--{if $Think.config.ds_config.mapak_type eq '1'}-->
<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:"{$Think.config.ds_config.gaode_jscode}",
        }
</script>
<script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key={$Think.config.ds_config.gaode_ak}"></script>
<!--{/if}-->
<!--{if $Think.config.ds_config.mapak_type eq '2'}-->
<script type="text/javascript" src="{$Think.HTTP_TYPE}api.map.baidu.com/api?v=2.0&ak={$Think.config.ds_config.baidu_ak}"></script>
<!--{/if}-->

<!--[if lte IE 9]>
<link rel="stylesheet" href="{$Think.PLUGINS_SITE_ROOT}/swiper/idangerous.swiper2.7.6.css">
<script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/swiper/idangerous.swiper2.7.6.min.js"></script>
<![endif]-->
<script>
    var local;
    var map;
    var the_sc_id = 0;
    var page = 1;
    var lock = 1;
    $(function () {
        $(window).bind("scroll", function () {
            var sTop = $(window).scrollTop();
            sTop = parseInt(sTop);

            if ((sTop + 500) > $('#get_more').offset().top) {
                more_store();
                //console.log($('#get_more').offset().top);
                //console.log(sTop);
            }
        })

        mySwiper=new Swiper('.swiper-container', {
            slidesPerView: 9,
            paginationClickable: true,
            spaceBetween: 0,
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',

        })

  $('.swiper-button-prev').on('click', function(e){
    
	if(mySwiper.hasOwnProperty('swipePrev')){
		e.preventDefault()
		mySwiper.swipePrev()
	}
    
  })
  $('.swiper-button-next').on('click', function(e){
  if(mySwiper.hasOwnProperty('swipeNext')){
    e.preventDefault()
    mySwiper.swipeNext()
	}
  })
  if ('{$Think.config.ds_config.mapak_type}' === '1'){
		map = new AMap.Map("nearby_map", {
			resizeEnable: true,
			zoom:15
		});
		var lng = getCookie("longitude");
		var lat = getCookie("latitude");
		//搜索定位
		AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
			var auto = new AMap.AutoComplete({input:"keywords"});
			var placeSearch = new AMap.PlaceSearch({
				map: map
			});  //构造地点查询类
			auto.on("select", select);//注册监听，当选中某条记录时会触发
			function select(e) {
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name);  //关键字查询查询
			}
		});
		if(!lng && !lat){
			map = new AMap.Map("nearby_map", {
				resizeEnable: true,
				zoom:15
			});
			//获取用户所在城市信息
			AMap.plugin("AMap.CitySearch", function () {
				var citySearch = new AMap.CitySearch();
				citySearch.getLocalCity(function (status, result) {
				  if (status === "complete" && result.info === "OK") {
					// 查询成功，result即为当前所在城市信息
					AMap.plugin("AMap.Geocoder", function () {
					  var geocoder = new AMap.Geocoder({
						// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
						city: result.adcode,
					  });
					  geocoder.getLocation(result.city, function(status1, result1) {
						  var location = result1.geocodes[0].location;
						  var addComp = result1.geocodes[0].addressComponent;
						  var province = addComp.province;//获取省份
						  var city = addComp.city;//获取城市
						  var district = '';//区
							var lng = location.lng;
							var lat = location.lat;
							
							//初始化定位
							var marker = new AMap.Marker({
								position: new AMap.LngLat(lng, lat),
								icon: '//api.map.baidu.com/images/marker_red_sprite.png',
								zoom: 15
							});
							map.add(marker);
							map.panTo([lng, lat]);
							
							setCookie('pos_city', city, 30);
							setCookie('pos_district', district, 30);
							$("#pos_city").text(city);
							$("#pos_district").text(district);
							setCookie('longitude', lng, 30);
							setCookie('latitude', lat, 30);
							get_store(lng, lat);
						});
					});
				  }
				});
			  });
		}else{
			map.panTo([lng, lat]);
			//初始化定位
			var marker = new AMap.Marker({
				position: new AMap.LngLat(lng, lat),
				icon: '//api.map.baidu.com/images/marker_red_sprite.png',
				zoom: 15
			});
			map.add(marker);
			setCookie('longitude', lng, 30);
			setCookie('latitude', lat, 30);
			get_store(lng, lat);
			var pos_city = getCookie("pos_city");
			var pos_district = getCookie("pos_district");
			$("#pos_city").text(pos_city);
			$("#pos_district").text(pos_district);
		}
	}
        if ('{$Think.config.ds_config.mapak_type}' === '2'){
		map = new BMap.Map('nearby_map');
		map.enableScrollWheelZoom();
		map.enableContinuousZoom();
		//绑定地图单击事件
		//map.addEventListener("click", clickMap);
		var lng = getCookie("longitude");
		var lat = getCookie("latitude");
		if (!lng && !lat) {
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function (r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var lng = r.point.lng;
					var lat = r.point.lat;

					change_center(lng, lat);
					var gc = new BMap.Geocoder();  //初始化，Geocoder类

					gc.getLocation(r.point, function (rs) {
						var addComp = rs.addressComponents;
						var province = addComp.province;//获取省份
						var city = addComp.city;//获取城市
						var district = addComp.district;//区
						var street = addComp.street;//街
						setCookie('pos_city', city, 30);
						setCookie('pos_district', district, 30);
						$("#pos_city").text(city);
						$("#pos_district").text(district);
					});
				} else {
					layer.msg('failed' + this.getStatus());
				}
			}, {enableHighAccuracy: true})
		} else {
			change_center(lng, lat);
		}
		var options = {
			onSearchComplete: function (results) {
				// 判断状态是否正确
				if (local.getStatus() == BMAP_STATUS_SUCCESS) {
	//                            var s = [];
	//                            for (var i = 0; i < results.getCurrentNumPois(); i ++){
	//                                    s.push('<p class="address_list_wrap" onclick="change_center('+results.getPoi(i).point.lng+','+results.getPoi(i).point.lat+')"><span class="address_mt">'+results.getPoi(i).title + "</span><br><span class='address_mc'> " + results.getPoi(i).address+'</span></p>');
	//                            }
	//                            document.getElementById("r-result").innerHTML = s.join("");
					if (results.getCurrentNumPois() > 0) {
						change_center(results.getPoi(0).point.lng, results.getPoi(0).point.lat);
					}

				}
			}
		};
		local = new BMap.LocalSearch(map, options);
		var pos_city = getCookie("pos_city");
		var pos_district = getCookie("pos_district");
		$("#pos_city").text(pos_city);
		$("#pos_district").text(pos_district);
	}
    })
    function clickMap(event) {

        pinLng = event.point.lng;
        pinLat = event.point.lat;
        change_center(pinLng, pinLat);
    }
    function change_center(lng, lat) {
        map.clearOverlays();  //清除标注  或者可以把market 放入数组
        var point = new BMap.Point(lng, lat);
        var marker = new BMap.Marker(point);
        map.centerAndZoom(point, 16);
        map.addOverlay(marker);
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        setCookie('longitude', lng, 30);
        setCookie('latitude', lat, 30);
        get_store(lng, lat);
    }
    function more_store() {
        if (lock) {
            return;
        }
        lock = 1;
        var lng = getCookie("longitude");
        var lat = getCookie("latitude");
        $.getJSON(HOMESITEURL + "/Shopnearby/get_Own_Store_List?longitude=" + lng + "&latitude=" + lat + "&storeclass_id=" + the_sc_id + '&page=' + page, function (data) {
            var store_list = data
            if (store_list) {
                $('.store_list').show();
                $('.ds-no-content').hide();
                var html = '';
                for (var k in store_list) {
                    var goods_html = '';
                    for (var j in store_list[k].goods_list) {
                        var goods = store_list[k].goods_list[j];
                        goods_html += '<img src="' + goods.goods_image + '">';
                    }
                    html += '<a href="' + HOMESITEURL + "/Store/index/store_id/" + store_list[k].store_id + '">' +
                            '<div class="category_store">' +
                            '<div class="shop_banner"></div>' +
                            '<div class="store_info">' +
                            '<img class="store_info_img" src="' + store_list[k].store_avatar + '">' +
                            '<div class="store_msg">' +
                            '<div class="store_name_wrap">' +
                            '<div class="store_name">' + store_list[k].store_name + '</div>' +
                            '</div>' +
                            '<div class="announcement">' +
                            '<div class="business_time">' +
                            '<span>' + store_list[k].area_info + '</span>' +
                            '</div>' +
                            '<div class="advertisement">' +
                            '<div class="goods-price">' + store_list[k].store_address + '</div>' +
                            '<div class="goods-price">' + store_list[k].distance + 'm</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="goods_list">' +
                            goods_html +
                            '</div>' +
                            '</div>' +
                            '</a>';
							if('{$Think.config.ds_config.mapak_type}' === '1'){
								if(store_list[k].store_longitude != '' || store_list[k].store_latitude != ''){
									var infoWindow = new AMap.InfoWindow({});
									var marker = new AMap.Marker({
										position: new AMap.LngLat(store_list[k].store_longitude, store_list[k].store_latitude),
										icon: '//api.map.baidu.com/images/marker_red_sprite.png',
										zoom: 15
									});
									marker.content = '<h2 style="color:orangered;font-size:16px">'+store_list[k].store_name+'</h2><p style="font-size:14px">{$Think.lang.address}：' + store_list[k].store_address + '</p><p style="font-size:14px">{$Think.lang.the_phone}：' + store_list[k].store_phone + '</p>';
									marker.on('click', markerClick);
									map.add(marker);
									 function markerClick(e) {
										infoWindow.setContent(e.target.content);
										infoWindow.open(map, e.target.getPosition());
									}
								}
							}
                                                        if('{$Think.config.ds_config.mapak_type}' === '2'){
								var marker = new BMap.Marker(new BMap.Point(store_list[k].store_longitude,store_list[k].store_latitude));  // 创建标注
								map.addOverlay(marker);
								var content = '<h2 style="color:orangered;font-size:16px">'+store_list[k].store_name+'</h2><p style="font-size:14px">{$Think.lang.address}：' + store_list[k].store_address + '</p><p style="font-size:14px">{$Think.lang.the_phone}：' + store_list[k].store_phone + '</p>';
								// 将标注添加到地图中
								addClickHandler(content,marker);
							}
                }
                $('.store_list').append(html);
                page++;
                lock = 0;
            }
        })
    }
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
	var opts = {
		width : 250,     // 信息窗口宽度
		height: 80,     // 信息窗口高度
		};
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
    function get_store(lng, lat) {
        lock = 1;
        page = 1;
        $('.content-container').text('{$Think.lang.in_the_search}');
        $.getJSON(HOMESITEURL + "/Shopnearby/get_Own_Store_List?longitude=" + lng + "&latitude=" + lat + "&storeclass_id=" + the_sc_id, function (data) {
            var store_list = data
            if (store_list) {
                $('.store_list').show();
                $('.ds-no-content').hide();
                var html = '';
                for (var k in store_list) {
                    var goods_html = '';
                    for (var j in store_list[k].goods_list) {
                        var goods = store_list[k].goods_list[j];
                        goods_html += '<img src="' + goods.goods_image + '">';
                    }
                    html += '<a href="' + HOMESITEURL + "/Store/index/store_id/" + store_list[k].store_id + '">' +
                            '<div class="category_store">' +
                            '<div class="shop_banner"></div>' +
                            '<div class="store_info">' +
                            '<img class="store_info_img" src="' + store_list[k].store_avatar + '">' +
                            '<div class="store_msg">' +
                            '<div class="store_name_wrap">' +
                            '<div class="store_name">' + store_list[k].store_name + '</div>' +
                            '</div>' +
                            '<div class="announcement">' +
                            '<div class="business_time">' +
                            '<span>' + store_list[k].area_info + '</span>' +
                            '</div>' +
                            '<div class="advertisement">' +
                            '<div class="goods-price">' + store_list[k].store_address + '</div>' +
                            '<div class="goods-price">' + store_list[k].distance + 'm</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="goods_list">' +
                            goods_html +
                            '</div>' +
                            '<div class="qrcode_wrapper"><img src="{$Think.HOME_SITE_URL}/qrcode?url={:urlencode($Think.config.ds_config.h5_site_url)}%2fhome%2fstoredetail%3fid%3d'+store_list[k].store_id+'"><p>扫一扫，进入手机店铺</p></div>' +
                            '</div>' +
                            '</a>';
							if('{$Think.config.ds_config.mapak_type}' === '1'){
								if(store_list[k].store_longitude != '' || store_list[k].store_latitude != ''){
									var infoWindow = new AMap.InfoWindow({});
									var marker = new AMap.Marker({
										position: new AMap.LngLat(store_list[k].store_longitude, store_list[k].store_latitude),
										icon: '//api.map.baidu.com/images/marker_red_sprite.png',
										zoom: 15
									});
									marker.content = '<h2 style="color:orangered;font-size:16px">'+store_list[k].store_name+'</h2><p style="font-size:14px">{$Think.lang.address}：' + store_list[k].store_address + '</p><p style="font-size:14px">{$Think.lang.the_phone}：' + store_list[k].store_phone + '</p>';
									marker.on('click', markerClick);
									map.add(marker);
									 function markerClick(e) {
										infoWindow.setContent(e.target.content);
										infoWindow.open(map, e.target.getPosition());
									}
								}
							}
                                                        if('{$Think.config.ds_config.mapak_type}' === '2'){
								var marker = new BMap.Marker(new BMap.Point(store_list[k].store_longitude,store_list[k].store_latitude));  // 创建标注
								var content = '<h2 style="color:orangered;font-size:16px">'+store_list[k].store_name+'</h2><p style="font-size:14px">{$Think.lang.address}：' + store_list[k].store_address + '</p><p style="font-size:14px">{$Think.lang.the_phone}：' + store_list[k].store_phone + '</p>';
								map.addOverlay(marker);               // 将标注添加到地图中
								addClickHandler(content,marker);
							}
                }
                $('.store_list').html(html);
                page++;
                lock = 0;
            } else {
                $('.store_list').hide();
                $('.ds-no-content').show();
                $('.content-container').text('{$Think.lang.no_shops}');
            }
        })
    }
    function change_map(name) {
        if('{$Think.config.ds_config.mapak_type}' === '1' ){
			if (name != '') {
				var map = new AMap.Map("nearby_map", {
					resizeEnable: true,
					zoom:15
				});
				AMap.plugin('AMap.Geocoder', function () {
					  var geocoder = new AMap.Geocoder();
					  geocoder.getLocation(name, function (status, result) {
						  var lng = result.geocodes[0].location.lng
						  var lat = result.geocodes[0].location.lat
						  map.panTo([lng, lat]);
					  });
				});
				$('#pos_city').text(name);
				setCookie('pos_city', name, 30);
			}
		}
                if('{$Think.config.ds_config.mapak_type}' === '2' ){
			if (name != '') {
				map.centerAndZoom(name, 16);
				map.setCurrentCity(name);
				local.search(name);
				$('#pos_city').text(name);
				setCookie('pos_city', name, 30);
			}
		}
    }

//    function city_click(type, name) {
//        $("#pos_" + type).text(name);
//        setCookie('pos_' + type, name, 30);
//        change_map(name);
//    }
    function select_sc(storeclass_id) {
        the_sc_id = storeclass_id;

        $('.category_name .text').removeClass('green');
        $('[data-id=' + storeclass_id + ']').parent().addClass('green');

        var lng = getCookie("longitude");
        var lat = getCookie("latitude");
        get_store(lng, lat);
    }
</script>
<div class="main_content">
    <div class="choose-city-div" style="display: none; ">
        <div class="city-content">
            <div class="header">
                <div class="title">{$Think.lang.your_city}</div>
                <span class="close_div" onclick="$('.choose-city-div').hide();$('.choose-city-overlay').hide();">X</span>
            </div>
            <div class="content">
                <div class="content-bottom">
                    {foreach name='city_list' item='city'}
                    <div>
                    <div class="title">{$city.region}</div>
                    <div class="position-list">
                        {foreach name='city.child' item='c'}
                        <li class="position-li " onclick="change_map('{$c.area_name}');$('.position-list li').removeClass('active');$(this).addClass('active')" >{$c.area_name}</li>
                        {/foreach}
                    </div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    <div class="choose-city-overlay" style="display: none;"></div>
    <div class="ds-header fixed">
        <div class="ds-content">
                <div class="select-location">
                    <i class="iconfont" onclick="$('.choose-city-div').show();$('.choose-city-overlay').show();">&#xe720;</i>
                    <span class="current-position" id="pos_city">{$Think.lang.in_the_location}...</span>
                    <span class="choose-city" id="pos_district" style="display:none"></span>
                </div>
            <div class="ds-fl search" data-url="http://install.dev/index.php?m=main&c=index&a=search">
                <input type="text" placeholder="{$Think.lang.office_building}" name="keywords" value="" id="keywords" autocomplete="off"/>
                <!--{if $Think.config.ds_config.mapak_type eq '2'}--><button class="button search-button" onclick="local.search($('#keywords').val())"><i class="iconfont">&#xe718;</i></button><!--{/if}-->
                <ul class="shelper"></ul>
            </div>
            
        </div>
    </div>

    <div class="category w1200">
	<div class="nearby_map" id="nearby_map">

        </div>
        <div class="ds-content">
            <div class="category_list">
                <div class="ds-category-swiper">
                    <div id="category-swiper-web" class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="category_name category_all swiper-slide my-active" onclick="select_sc(0)">
                                <p class="text green"><a href='javascript:volid(0)' data-id="0">{$Think.lang.all_categories}</a></p>
                            </div>
                            {foreach name="storeclass_list" item="sc"}
                            <div class="category_name swiper-slide " onclick="select_sc({$sc.storeclass_id})">
                                <p class="text "><a href='javascript:volid(0)' data-id="{$sc.storeclass_id}">{$sc.storeclass_name}</a></p>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white"></div>
                </div>
            </div>
        </div>

        <div class="store_list" style="display:none">

        </div>
    </div>
    <div id="get_more"></div>
    <div class="ds-no-content">
        <div class="content">
            <div class="content-container">
                <p>{$Think.lang.in_the_search}...</p>
            </div>
        </div>
    </div>
</div>



{/block}